<!DOCTYPE html>
<html>
<head>
    <title>Foundation 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../libs/foundation/5.5.3/css/foundation.min.css">
    <script src="../libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../foundation/5.5.3/js/foundation.min.js"></script>
    <script src="../libs/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
    <h2>网格中的价格表</h2>
    <div class="medium-4 columns">
        <ul class="pricing-table">
            <li class="title">Basic</li>
            <li class="price">$19.99</li>
            <li class="description">Great for small business</li>
            <li class="bullet-item">24/7 Support</li>
            <li class="bullet-item">15GB Storage</li>
            <li class="bullet-item">1GB Bandwidth</li>
            <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
        </ul>
    </div>
    <div class="medium-4 columns">
        <ul class="pricing-table">
            <li class="title">Pro</li>
            <li class="price">$29.99</li>
            <li class="description">For the Average Joe</li>
            <li class="bullet-item">24/7 Support</li>
            <li class="bullet-item">25GB Storage</li>
            <li class="bullet-item">2GB Bandwidth</li>
            <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
        </ul>
    </div>
    <div class="medium-4 columns">
        <ul class="pricing-table">
            <li class="title">Premium</li>
            <li class="price">$49.99</li>
            <li class="description">When only the best is an option</li>
            <li class="bullet-item">24/7 Support</li>
            <li class="bullet-item">Unlimited Storage</li>
            <li class="bullet-item">Unlimited Bandwidth</li>
            <li class="cta-button"><a class="a button" href="#">Sign Up</a></li>
        </ul>
    </div>
</div>

</body>
</html>